<template>
  <div class="dlPassword-content">
    <div v-if="showFlag">
      <el-form label-width="100px">
        <el-form-item label="旧密码：">
          <el-input type='password' v-model="reqParams.oldpassword" placeholder="请输入您的旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码：">
          <el-input type='password' v-model="reqParams.newpassword" placeholder="请输入您的新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：">
          <el-input type='password' v-model="reqParams.confirmpassword" placeholder="请输入您的新密码"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="_editDLPassword">提交</el-button>
    </div>
    <div v-else>
      <img class="successImg" src="@/assets/icon-success.png" alt />
      <h1 class="successText">修改成功！</h1>
    </div>
  </div>
</template>

<script>
import { editDLPassword } from "@/api/accountSettings";
export default {
  name: "dlPassword",
  data() {
    return {
      reqParams: {
        oldpassword: "",
        newpassword: "",
        confirmpassword: ""
      },
      showFlag: true
    };
  },
  methods: {
    // 重置步骤
    resetPages() {
      if (!this.showFlag) {
        this.showFlag = true;
        console.log("重置步骤", this.showFlag);
      }
    },
    _editDLPassword() {
      if (this.reqParams.oldpassword == "") {
        this.$message.error("请输入旧密码");
      } else if (this.reqParams.newpassword == "") {
        this.$message.error("请输入新密码");
      } else if (this.reqParams.confirmpassword == "") {
        this.$message.error("请确认新密码");
      } else {
        editDLPassword(this.reqParams).then(res => {
          if (res.code == 1) {
            this.$message.success("修改成功");
            this.showFlag = false;
          }
        });
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.dlPassword-content {
  text-align: center;
  padding: 40px 0 50px 0;
  .el-form {
    width: 50%;
    margin: 0 auto;
  }
  .el-button {
    width: 345px;
    height: 45px;
    background: #ff7f5b;
    color: #fff;
    margin-top: 30px;
  }
  .successImg {
    width: 100px;
    height: 125px;
    margin-top: 80px;
  }
  .successText {
    font-size: 20px;
    color: #333;
  }
}
</style>